<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ECMAsctipt入门介绍</title>
</head>
<body>
    <button id="btn1">测试箭头函数this_1</button>
    <button id="btn2">测试箭头函数this_2</button>
    <!-- 
        作用：定义匿名函数
        基本语法：
            * 没有参数：()=>console.log('xxxx')
            * 一个参数：i => i+2
            * 大于一个参数： （i,j) => i+j
            * 函数体不用大括号：默认返回结果
            * 函数体如果有多个语句，需要用{}包围，若有需要返回的内容，需要手动返回
        * 使用场景：多用来定义回调函数

        *箭头函数的特点：
            1.简洁
            2.箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在对象就是它的this
            3.扩展理解： 箭头函数的this看外层的是否有函数，
                如果有，外层函数的this就是箭头函数的this，
                如果没有，则this是window；

     -->
     <script>
         //常规的
        //  let fun = function (){

        //  }

        let fun = () => console.log('我是箭头函数');
        fun();

        //形参的情况
        // 1.没有形参的时候
        let fun1 = () => console.log('我是箭头函数');
        fun1();
        // 2.只有一个形参的时候
        let fun2 = a => console.log(a);
        fun2('aaaa');
        // 3.两个及两个以上的形参的时候 ()不能省略
        let fun3 = (x,y) => console.log(x,y)
        fun3(3,4)

        //4.函数体的情况
            // 1.函数体只有一条语句或者是表达式的时候{} 可以省略
            //let fun4 = () => {console.log('我是箭头函数')}
            let fun4 = (x,y) => x+y
            //如果
            //let fun4 = (x,y) => {x+y} 为undefied
            console.log(fun4(24,36))//60
            //2.函数体不止一条语句或者是表达式的情况 {} 不可以省略
            let fun5 = (x,y)=> {
                console.log(x,y)
                return x+y; //必须return
            }

            // 测试箭头函数的this
            let btn1 = document.getElementById('btn1');
            let btn2 = document.getElementById('btn2');
            btn1.onclick = function (){
                alert(this) //HTMLButtonElement
            }

            btn2.onclick = () => {
                alert(this) //window
            }

            // let obj = {
            //     name:'箭头函数',
            //     getName:function(){
            //         btn2.onclick = () =>{
            //             console.log(this)
            //         }
            //     }
            // }
            // obj.getName() //指向obj

            let obj = {
                name:'箭头函数',
                getName:() =>{
                    btn2.onclick = () =>{
                        console.log(this)
                    }
                }
            }
            obj.getName() //obj指向window
     </script>
</body>
</html>